<!doctype html>
<!--[if IE 7]><html class="ie7" lang="en"><![endif]-->
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if gt IE 9]><!--><html lang="en"><!--<![endif]-->
<head>
	<meta charset="utf-8" />
	<title>Site | Booking</title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="robots" content="index, follow" />
	<meta name="author" content="" />	
    <meta name="viewport" content="width=device-width" />
	<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300&subset=latin,vietnamese,latin-ext' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.3.custom.css" media="screen" />	
    <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" media="screen" />
    <!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>
<body>
	<div id="container" role="main">
		<div class="header">
            <div class="navbar navbar-inverse" role="navigation">
                <div class="top-header">
                	<div class="inner clearfix">
                        <ul class="list-1 clearfix ">
                            <li class="pull-left">
                            	<span class="btn btn-user"><i class="fa fa-user"></i></span>
                            </li>
                            <li>
                            	<div class="navbar-header">
			                        <a class="navbar-brand" href="#"><img src="images/logo.png" alt="" /></a> 
			                    </div>
                            </li>
                            <li class="pull-right">
                            	<span class="btn btn-search"><i class="fa fa-search"></i></span>
                            </li>
                        </ul>
                    	<form class="form-search hidden" method="get" id="form-search" action="/">
						    <div class="input-append">
						        <input type="text" class="input-medium search-query" name="search" placeholder="Search..." value="">
						    </div>
						    <div class="wrap-btn-search">
						    	<i class="fa fa-search"></i>
						    </div>
						</form>
	                </div>
                </div>
            </div>
        </div>
		<div id="main">
			<div class="block-1">
				<div class="top">
					<div class="inner">
						<div class="text-1">
							<div class="pull-left">
								<h2 class="title">Future Now Music Festival</h2>
								<span class="sub-title">THE HOTTEST EDM EVENT OF 2014</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="tabs-block">
				<ul class="nav nav-tabs">
				  	<li class="active"><a class="first" href="#booking" data-toggle="tab">Booking</a></li>
				  	<li><a class="mid" href="#billing-infor" data-toggle="tab">Information</a></li>
				  	<li><a href="#review-confirm" data-toggle="tab" class="last">Confirm</a></li>
				</ul>
				<!-- Tab panes -->
				<div class="inner">
					<div class="tab-content">
					  	<div class="tab-pane active" id="booking">
					  		<div class="seat-map">
					  			<a href="#" title="SeatMap" class="btn btn-default">SeatMap</a>
					  			<p>(Please choose your tickets on seatmap first)</p>
					  		</div>
					  		<div class="order-table tab-pane-step-1">
				  				<ul class="list-products" id="accordion">
									<li class="first-line-dash">
										<div class="pull-left">
											<span class="title"><strong>Zone 2 - Discount 20%</strong></span>
											<span class="cost">720,000 VNĐ / Ticket(s)</span>
										</div>
										<div class="text-right">
											<div class="dropdown type-1" data-toggle="dropdown" data-target="#menu-choose-quantity">
												<a role="button" class="btn btn-choose-quantity">0</a>
												<span class="wrap-icon">
													<i class="fa fa-angle-down" style="color: #ffffff;"></i>
												</span>
												<div id="menu-choose-quantity" class="dropdown-menu warp-blk-choose-quantity" role="menu">
													<span class="arrow_box"></span>
													<ul>
														<li role="presentation"><a role="menuitem" tabindex="0" href="#">0</a></li>
														<li role="presentation"><a role="menuitem" tabindex="1" href="#">1</a></li>
														<li role="presentation"><a role="menuitem" tabindex="2" href="#">2</a></li>
													</ul>
												</div>
											</div>
										</div>
										<div id="collapseOne" class="panel-collapse collapse infor-products">
											<p>Each ticket will come with a raincoat, a waterproof phone pouch and one Peroni beer bottle which you will receive at the event. </p>
											<br />
											<p>With every 5 tickets purchased, there will be a table receiving card. We will contact & send it to you directly. Each table receiving card will allow you to receive the following:</p>
											<br />
											<ul>
												<li> + A table </li>
												<li>+ 1 Moet & Chandon Champagne bottle </li>
												<li>+ 1 Fruit plate</li>
											</ul>
											<br />
											<img width='320px' height='143px' src='images/upload/thumb-popover.jpg' alt='' />
										</div>
										<div class="more-details">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" title="">More Detail</a>
										</div>
									</li>
									<li>
										<div class="pull-left">
											<span class="title"><strong>Zone 2 - Discount 20%</strong></span>
											<span class="cost">720,000 VNĐ / Ticket(s)</span>
										</div>
										<div class="text-right">
											<div class="dropdown type-1" data-toggle="dropdown" data-target="#menu-choose-quantity">
												<a role="button" class="btn btn-choose-quantity">0</a>
												<span class="wrap-icon">
													<i class="fa fa-angle-down" style="color: #ffffff;"></i>
												</span>
												<div id="menu-choose-quantity" class="dropdown-menu warp-blk-choose-quantity" role="menu">
													<!-- <span class="arrow_box"></span> -->
													<ul>
														<li role="presentation"><a role="menuitem" tabindex="0" href="#">0</a></li>
														<li role="presentation"><a role="menuitem" tabindex="1" href="#">1</a></li>
														<li role="presentation"><a role="menuitem" tabindex="2" href="#">2</a></li>
													</ul>
												</div>
											</div>
										</div>
										<div class="more-details">
											<a href="javascript:void(0)" title="">More Detail</a>
										</div>
									</li>
									<li>
										<div class="pull-left">
											<span class="title"><strong>Zone 2 - Discount 20%</strong></span>
											<span class="cost">720,000 VNĐ / Ticket(s)</span>
										</div>
										<div class="text-right">
											<div class="dropdown type-1" data-toggle="dropdown" data-target="#menu-choose-quantity">
												<a role="button" class="btn btn-choose-quantity">0</a>
												<span class="wrap-icon">
													<i class="fa fa-angle-down" style="color: #ffffff;"></i>
												</span>
												<div id="menu-choose-quantity" class="dropdown-menu warp-blk-choose-quantity" role="menu">
													<!-- <span class="arrow_box"></span> -->
													<ul>
														<li role="presentation"><a role="menuitem" tabindex="0" href="#">0</a></li>
														<li role="presentation"><a role="menuitem" tabindex="1" href="#">1</a></li>
														<li role="presentation"><a role="menuitem" tabindex="2" href="#">2</a></li>
													</ul>
												</div>
											</div>
										</div>
										<div class="more-details">
											<a href="javascript:void(0)" title="">More Detail</a>
										</div>
									</li>
									<li class="footer-row">
										<td colspan="2">
											<div class="wrap-discount-code">
				  								<input value="32187hjdks" type="text" class="txt-code" name="txt-code"/>
				  								<span class="icon-valid"></span>
				  							</div>
										</td>
									</li>
									<li class="footer-row">
										<td colspan="2">
											<div class="wrap-cost">
												<span class="title pull-left">TOTAL:</span>
												<span class="icon-convert"></span>
												<div class="cost">
													<span class="before-discount">6,920,000 VNĐ</span>
													<span class="after-discount">6,800,000 VNĐ</span>
												</div>
											</div>
										</td>
									</li>
								</ul>
			  				</div>
			  				<div class="order-table tab-pane-step-1">
				  				<ul class="list-products">
									<li class="first-line-dash">
										<div class="pull-left">
											<span class="title"><strong>VIP 1 (Left side) - 10% Discount</strong></span>
											<span class="cost">720,000 VNĐ / Ticket(s)</span>
											<span class="seat">Seat: <span>A1, A2</span></span>
										</div>
										<div class="text-right">
											<span>QTY</span>
											<span>2</span>
										</div>
									</li>
									<li class="first-line-dash">
										<div class="pull-left">
											<span class="title"><strong>VIP 1 (Left side) - 10% Discount</strong></span>
											<span class="cost">720,000 VNĐ / Ticket(s)</span>
											<span class="seat">Seat: <span>A1, A2</span></span>
										</div>
										<div class="text-right">
											<span>QTY</span>
											<span>2</span>
										</div>
									</li>
									<li class="first-line-dash">
										<div class="pull-left">
											<span class="title"><strong>VIP 1 (Left side) - 10% Discount</strong></span>
											<span class="cost">720,000 VNĐ / Ticket(s)</span>
											<span class="seat">Seat: <span>A1, A2</span></span>
										</div>
										<div class="text-right">
											<span>QTY</span>
											<span>2</span>
										</div>
									</li>
									<li class="footer-row">
										<td colspan="2">
											<div class="wrap-discount-code">
				  								<input value="32187hjdks" type="text" class="txt-code" name="txt-code"/>
				  								<span class="icon-valid"></span>
				  							</div>
										</td>
									</li>
									<li class="footer-row">
										<td colspan="2">
											<div class="wrap-cost">
												<span class="title pull-left">TOTAL:</span>
												<span class="icon-convert"></span>
												<div class="cost">
													<span class="before-discount">6,920,000 VNĐ</span>
													<span class="after-discount">6,800,000 VNĐ</span>
												</div>
											</div>
										</td>
									</li>
								</ul>
			  				</div>
			  				<a href="#" title="Next Step" class="lnk lnk-next-step">Next Step<i class="fa fa-angle-right"></i></a>
					  	</div>
					  	<div class="tab-pane " id="billing-infor">
					  		<div class="billing-block tab-pane-step-2">
					  			<div class="inner-billing">
					  				<div>
					  					<h2 class="title">Please type your billing infomation:</h2>
					  					<form role="form" class="billing-form form-general">
										  	<div class="form-group">
											    <label for="name">Full Name <span class="wrap-icon-mandatory">*</span></label>
											    <input type="text" class="form-control" id="name" placeholder="...">
										  	</div>
										  	<div class="form-group pull-right">
											    <label for="phone">Phone number <span class="wrap-icon-mandatory">*</span></label>
											    <input type="text" class="form-control" id="phone" placeholder="...">
										  	</div>
										  	<div class="form-group">
											    <label for="shipping-address">Shipping Address <span class="wrap-icon-mandatory">*</span></label>
											    <input type="text" class="form-control" id="shipping-address" placeholder="...">
										  	</div>
										  	<div class="form-group pull-right">
											    <label for="email">Email address <span class="wrap-icon-mandatory">*</span></label>
											    <input type="email" class="form-control" id="email" placeholder="...">
										  	</div>
										  	<div class="form-group">
											    <label for="billing-address">Billing Address <span class="wrap-icon-mandatory">*</span></label>
											    <input type="text" class="form-control" id="billing-address" placeholder="...">
										  	</div>
										  	<div class="form-group pull-right">
											    <label for="others">Other</label>
											    <textarea class="form-control" rows="3" id="others" placeholder="..."></textarea>
										  	</div>
										  	<div class="checkbox">
												<input id="ck-newsletter" type="checkbox" name="check" value="">
												<label for="ck-newsletter">Sign up to recive newletter</label>
												<span class="icon-clone-address"></span>
											</div>
										</form>
					  				</div>
					  				<div>
					  					<div class="payment-type">
					  						<div class="inner-payment">
						  						<h2 class="title">Please choose payment types:</h2>
					  							<form role="form" class="payment-form form-general">
						  							<div class="form-group">
						  								<div class="radio">
						  									<input id="rdo-1" type="radio" name="payment" value="">
															<label for="rdo-1">
																<span class="desc-text">
													          		<span>Cash on deliver</span>
													          		<span>Delivery fee vary upon destination</span>
													          	</span>
															</label>
												      	</div>
						  							</div>
						  							<div class="form-group">
						  								<div class="radio">
						  									<input id="rdo-2" type="radio" name="payment" value="">
															<label for="rdo-2">
																<span class="desc-text">
													          		<span>CREDIT CARD</span>
													          		<span>Master, Visa card - E-Ticket sent directly to E-mail after payment</span>
													          	</span>
															</label>
												      	</div>
						  							</div>
						  							<div class="form-group">
						  								<div class="radio">
						  									<input id="rdo-3" type="radio" name="payment" value="">
															<label for="rdo-3">
																<span class="desc-text">
													          		<span>ATM CARD</span>
													          		<span>Local ATM bank card - Internet banking required - E-Ticket sent directly to E-mail after payment</span>
													          	</span>
															</label>
												      	</div>
						  							</div>
						  						</form>
						  						<ul class="list-inline">
						  							<li>
						  								<a href="#" title=""><img src="images/payment-1.jpg" alt="" /></a>
						  							</li>
						  							<li>
						  								<a href="#" title=""><img src="images/payment-2.jpg" alt="" /></a>
						  							</li>
						  							<li>
						  								<a href="#" title=""><img src="images/payment-3.jpg" alt="" /></a>
						  							</li>
						  							<li>
						  								<a href="#" title=""><img src="images/payment-4.jpg" alt="" /></a>
						  							</li>
						  						</ul>
					  						</div>
					  					</div>
				  					</div>
					  			</div>
					  		</div>
					  	</div>
					  	<div class="tab-pane" id="review-confirm">
					  		<div class="order-block">
				  				<div class="order-table">
					  			<div class="inner-table">					  				
									<div class="order-table tab-pane-step-1">
						  				<ul class="list-products type-2">
											<li>
												<div class="pull-left">
													<span class="title"><strong>VIP 1 (Left side) - 10% Discount</strong></span>
													<span class="cost">720,000 VNĐ / Ticket(s)</span>
													<span class="seat">Seat: <span>A1, A2</span></span>
												</div>
												<div class="text-right">
													<span>QTY</span>
													<span>2</span>
												</div>
											</li>
											<li>
												<div class="pull-left">
													<span class="title"><strong>VIP 1 (Left side) - 10% Discount</strong></span>
													<span class="cost">720,000 VNĐ / Ticket(s)</span>
													<span class="seat">Seat: <span>A1, A2</span></span>
												</div>
												<div class="text-right">
													<span>QTY</span>
													<span>2</span>
												</div>
											</li>
											<li>
												<div class="pull-left">
													<span class="title"><strong>VIP 1 (Left side) - 10% Discount</strong></span>
													<span class="cost">720,000 VNĐ / Ticket(s)</span>
													<span class="seat">Seat: <span>A1, A2</span></span>
												</div>
												<div class="text-right">
													<span>QTY</span>
													<span>2</span>
												</div>
											</li>
											<li >
												<table class="table table-responsive">
													<tr class="footer-row">
														<td class="text-left">DISCOUNT CODE:</td>
														<td class="text-right">dhsadh43947</td>
													</tr>
													<tr class="footer-row">
														<td class="text-left">TOTAL:</td>
														<td class="cost text-right">6,920,000 VNĐ</td>
													</tr>
												</table>
											</li>
										</ul>
					  				</div>
					  			</div>
			  				</div>
				  				<div class="customer-infor-table ">
					  				<table class="table table-responsive">
										<tr class="header-title">
											<th colspan="2">Customer Infomation</th>
										</tr>
										<tr>
											<td>Full name</td>
											<td>Trần Anh Khôi</td>
										</tr>
										<tr>
											<td>Phone number</td>
											<td>01226606060)</td>
										</tr>
										<tr>
											<td>Email Address</td>
											<td>trananhkhoi.tak@gmail.com</td>
										</tr>
										<tr>
											<td>Shipping Address</td>
											<td>964/14 Nguyen Kiem St, Phu Nhuan Ward, HCMC</td>
										</tr>
										<tr>
											<td>Billing Address</td>
											<td>964/14 Nguyen Kiem St, Phu Nhuan Ward, HCMC</td>
										</tr>
										<tr>
											<td>Payment Types</td>
											<td>Cash On Deliver </td>
										</tr>
										<tr>
											<td>Other</td>
											<td></td>
										</tr>
									</table>
				  				</div>
					  		</div>

					  		<div class="mailbox">
					  			<div class="wrap-mailbox">
						  			<div class="text-center">
						  				<p class="text-large"><strong>Your order has been paid</strong></p>
										<p class="text-large">Thank you for choosing Upbeat.vn</p>
						  			</div>
					  				<div class="hightline-text">
										<span>after that..</span>
									</div>
						  			<div class="col-lg-12 col-md-12 col-sm-12 col-xm-12">
										<div class="illustrate">
											<img src="images/photo-mailbox.png" alt="" />
						  					<span class="hot-line">Any question, please call: 0978.350.1010</span>
										</div>
						  			</div>
					  			</div>
					  			<a href="#" title="Back to home page" class="btn btn-default">Back to home page</a>
					  		</div>

					  		<div class="fail-block">
					  			<div class="text-center">
				  					<p><strong>Your order hasn’t been paid yet</strong></p>
				  					<p>Thank you for choosing Upbeat.vn</p>
				  					<p class="hot-line">Any question, please call: 0978.350.1010</p>
				  					<a href="#" title="Back to home page" class="btn btn-default">Back to home page</a>
				  				</div>
					  		</div>

					  		<div class="thanks">
					  			<div class="wrap-thanks">
						  			<div class="text-center">
						  				<span class="text-large"><strong>Thank you for using Upbeat.vn</strong></span>
										<p> Please check your e-mail, we will contact you as soon as possible to verify your order.</p>
						  			</div>
						  			<div class="hightline-text">
						  				<span>after that..</span>
					  				</div>
						  			<div class="illustrate">
										<img src="images/photo-thanks.png" alt="" />
										<span class="hot-line">Any question, please call: 0978.350.1010</span>
									</div>
					  			</div>
					  			<a href="#" title="Back to home page" class="btn btn-default">Back to home page</a>
					  		</div>
					  	</div>
					</div>
				</div>
					<!-- <a href="#" title="Next Step" class="lnk lnk-next-step next-step">Next Step<i class="fa fa-angle-right"></i></a>
					<a href="#" title="Back" class="lnk lnk-back-step">Back<i class="fa fa-angle-left"></i></a> -->
			</div>
		</div>
		<footer class="footer">
			<div class="inner">
		        <div class="pull-right">
		        	<ul class="list-1">
		        		<li>
		        			<a href="#" title="Customer services: 0978.35.1010">Customer services: 0978.35.1010</a>
		        		</li>
		        	</ul>
		        </div>
		        <p>© 2014 Nhipdap Co. ltd.</p>
			</div>
    	</footer>
	</div>
	<div class="slide-in">
		<ul class="tk-museo-sans">
			<li class="last">
				<div class="wrap-top clearfix">
					<div class="left">
		                <a class="btn-choose-lang" data-toggle="dropdown" data-target="#menu2">EN<i class="fa fa-angle-down"></i></a>
						<div id="menu2" class="dropdown-menu warp-blk-list-lang" role="menu" aria-labelledby="drop5">
							<span class="arrow_box"></span>
							<ul>
								<li role="presentation"><a role="menuitem" tabindex="-1" href="#">EN</a></li>
								<li role="presentation"><a role="menuitem" tabindex="-1" href="#">VN</a></li>
							</ul>
						</div>
					</div>
					<div class="right">
		                <div class="wrap-social">
		                	<a href="" title="facebook"><i class="fa fa-facebook-square"></i></a>
		                	<a href="" title="youtube"><i class="fa fa-youtube-square"></i></a>
		                </div>
					</div>
				</div>
            	<a href="javascript:void(0)" class="btn btn-default btn-lg">for organizer</a>
            	<div class="wrap-user">
            		<div class="wrap-img">
            			<img src="images/avatar-user.png" alt="">
            		</div>
            		<span class="name">Khôi Trần</span>
            	</div>
            	<a href="javascript:void(0)" class="btn btn-login-fb"><span class="wrap-icon"><i class="fa fa-facebook"></i></span><span class="name">FACEBOOK LOGIN </span></a>
            	<span class="highlight"></span>
            </li>
			<li><a href="#" title="who we are?">who we are?</a><span class="highlight"></span></li>
			<li><a href="#" title="What we do?">What we do?</a><span class="highlight"></span></li>
		</ul>
	</div>
	<div class="modal fade hidden" id="authenticate-modal">
	  <div class="modal-dialog wrap-authenticate">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <h4 class="modal-title hidden">Modal title</h4>
	      </div>
	      <div class="modal-body blk-authenticate">
	        <div class="row">
	  			<div class="col-xs-12">
	  				
	  			</div>
			</div>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	<script type="text/javascript" src="js/lib.js"></script> 
	<script type="text/javascript" src="js/l10n.js"></script>
	<script type="text/javascript" src="js/plugin.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/start.js"></script>
</body>
</html>
